 <div id="login" class="login_wrapper">
 	<div class="animate form login_form">
 		<section class="login_content">
 			<form action="javascript:void(0);">
 				<h1>城市管理系统登录</h1>
 				<div>
 					<input
 						type="text"
 						v-model="user.userName"
 						class="form-control"
 						placeholder="User Name"
 						required=""
 					/>
 				</div>
 				<div>
 					<input
 						type="password"
 						v-model="user.password"
 						class="form-control"
 						placeholder="Password"
 						required=""
 					/>
 				</div>
 				<div>
 					<input
 						type="text"
 						v-model="user.verificationCode"
 						placeholder="请输入验证码"
 						class="form-control"
 						style="width: 65%; float: left; margin-bottom: 0px"
 					/>
 					<canvas id="canvas" @click="draw()" width="100" height="36"></canvas>
 				</div>
 				<div style="text-align: left">
 					<input type="checkbox" v-model="user.rememberMe" style="margin: 10px 0" />&nbsp;&nbsp;Remember Me
 				</div>
 				<div>
 					<a @click="login()" class="btn btn-default submit" href="javascript:void(0);">Log in</a>
 					<a class="reset_pass" href="#">Lost your password?</a>
 				</div>
 
 				<div class="clearfix"></div>
 
 				<div class="separator">
 					<p class="change_link">
 						New to site?
						<a href="/register" class="to_register"> Create Account </a>
 					 
 					</p>
 
 					<div class="clearfix"></div>
 					<br />
 
 					<div>
 						<h1><i class="fa fa-paw"></i> Java_Spring_Boot</h1>
 						<p>©2022 All Rights Reserved. Using is a Bootstrap 3 template.</p>
 					</div>
 				</div>
 			</form>
 		</section>
 	</div>
 </div>
 <script>
 	var loginVue = new Vue({
 		el: "#login",
 		data: {
 			user: {
 				userName: "",
 				password: "",
 				rememberMe: false,
 				verificationCode: "",
 			},
 			show_num: [],
 		},
 		methods: {
 			login: function () {
 				if (this.user.userName == "" || this.user.password == "") {
 					layer.msg("Please input user name and password", { icon: 0 });
 					return;
 				}
 				// if (this.user.verificationCode != this.show_num.join("")) {
 				// 	layer.msg("验证码输入错误.", { icon: 0 });
 				// 	return;
 				// }
 
 				console.log(this.user);
 
 				var self = this;
 				$.ajax({
 					url: "/api/login",
 					type: "post",
 					contentType: "application/json",
 					data: JSON.stringify(self.user),
 					success: function (rs) {
 						if (rs.status == 200) {
 							// window.location.href = "/test/index";
							window.location.href = "/common/dashboard";
 						} else {
 							layer.msg(rs.message, { icon: 0 });
 						}
 					},
 					error: function (data) {
 						layer.alert(data.responseText, { icon: 0 });
 					},
 				});
 			},
 			draw: function () {
 				var canvas_width = $("#canvas").width();
 				var canvas_height = $("#canvas").height();
 				var canvas = document.getElementById("canvas"); //获取到canvas的对象
 				var context = canvas.getContext("2d"); //获取到canvas画图的环境
 				canvas.width = canvas_width;
 				canvas.height = canvas_height;
 				var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
 				var aCode = sCode.split(",");
 				var aLength = aCode.length; //获取到数组的长度
 
 				for (var i = 0; i <= 3; i++) {
 					var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
 					var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
 					var txt = aCode[j]; //得到随机的一个内容
 					this.show_num[i] = txt.toLowerCase();
 					var x = 10 + i * 20; //文字在canvas上的x坐标
 					var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
 					context.font = "bold 23px 微软雅黑";
 
 					context.translate(x, y);
 					context.rotate(deg);
 
 					context.fillStyle = this.randomColor();
 					context.fillText(txt, 0, 0);
 
 					context.rotate(-deg);
 					context.translate(-x, -y);
 				}
 				for (var i = 0; i <= 5; i++) {
 					//验证码上显示线条
 					context.strokeStyle = this.randomColor();
 					context.beginPath();
 					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
 					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
 					context.stroke();
 				}
 				for (var i = 0; i <= 30; i++) {
 					//验证码上显示小点
 					context.strokeStyle = this.randomColor();
 					context.beginPath();
 					var x = Math.random() * canvas_width;
 					var y = Math.random() * canvas_height;
 					context.moveTo(x, y);
 					context.lineTo(x + 1, y + 1);
 					context.stroke();
 				}
 			},
 			randomColor: function () {
 				var r = Math.floor(Math.random() * 256);
 				var g = Math.floor(Math.random() * 256);
 				var b = Math.floor(Math.random() * 256);
 				return "rgb(" + r + "," + g + "," + b + ")";
 			},
 		},
 		mounted: function () {
 			this.draw();
 		},
 	});
 </script>
